<template>
  <view v-show="!isDeleteAll" class="sku-form">
    <view class="sku-form__top">
      <view class="input-wrap">
        <input v-if="modify" v-model="formData.key" focus type="text" placeholder="请输入商品规格" @blur="handleBlurKey" />
        <text v-else>{{ formData.key }}</text>
      </view>
      <view class="btn-wrap">
        <text v-if="!modify" @click="modify=true">修改</text>
      </view>
    </view>
    <view class="sku-form__table">
      <view class="sku-form__table_head">
        <view class="sku-form__table_tr">
          <view class="sku-form__table_th td-width-1">
            <text>规格选项</text>
          </view>
          <view class="sku-form__table_th td-width-2">
            <text>价格(元)</text>
          </view>
          <view class="sku-form__table_th td-width-3">
            <text>库存</text>
            <text class="tip">(不限可不填)</text>
          </view>
        </view>
      </view>
      <view class="sku-form__table_body">
        <view v-for="(item, index) in formData.values" :key="index" class="sku-form__table_tr">
          <view class="sku-form__table_td td-width-1">
            <!-- 规格选项 -->
            <view class="sku-input-wrap">
              <input v-model="item.spec" type="text" placeholder="规格选项" class="sku-input" />
            </view>
          </view>
          <view class="sku-form__table_td td-width-2">
            <!-- 价格 -->
            <view class="sku-input-wrap">
              <input v-model.number="item.price" type="number" placeholder="两位小数" class="sku-input" @blur="handleBlurPrice(item)" />
            </view>
          </view>
          <view class="sku-form__table_td td-width-3">
            <!-- 库存 -->
            <view class="sku-input-wrap sku-stock-input-wrap">
              <input v-model.number="item.stock" type="number" placeholder="选填" class="sku-input" @blur="handleBlurStock(item)" />
            </view>
            <view class="sku-delete-wrap">
              <uni-icons type="minus-filled" size="20" color="#dd524d" @click="handleClickRemove(index)"></uni-icons>
            </view>
          </view>
        </view>
        <view class="sku-form__table_tr">
          <view class="sku-form__table_td td-width-1">
            <button size="mini" type="primary" plain @click="addSpec">添加选项</button>
          </view>
        </view>
        <view class="delete-btn-wrap">
          <button size="mini" type="warn" plain @click="handleDeleteSkus">删除该规格</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  maxPrice,
  maxStock,
  priceMessage,
  stockMessage
} from "../../../utils/validator";
export default {
  props: {
    initData: {
      type: Array,
      default() {
        return [];
      }
    },
    price: {
      type: [Number, String],
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      modify: false,
      formData: {
        key: "",
        values: []
      },
      deleteSkus: [],
      isDeleteAll: false
    };
  },
  computed: {},
  created() {
    if (this.initData.length > 0) {
      let form = {
        key: "",
        values: []
      };
      this.initData.forEach(item => {
        if (item.spec) {
          let spec = item.spec[0];
          form.key = spec.key;
          form.values.push({
            spec: spec.value,
            price: item.price,
            stock: item.stock,
            id: item.id
          });
        }
      });
      this.formData = form;
    }
  },
  methods: {
    handleClickRemove(index) {
      let sku = this.formData.values[index];
      if (sku.id) {
        this.deleteSkus.push({
          id: sku.id,
          isDelete: true,
          ...sku,
          spec: [{ key: this.formData.key, value: sku.spec }]
        });
      }
      this.formData.values.splice(index, 1);
    },
    setData(data) {
      this.isDeleteAll = false;
      this.formData = JSON.parse(JSON.stringify(data));
      if (!this.formData.key) this.modify = true;
    },
    // 删除该规格
    handleDeleteSkus() {
      this.formData.key = "";
      this.deleteSkus = this.formData.values
        .filter(v => v.spec)
        .map(v => {
          return {
            ...v,
            spec: null,
            isDelete: true
          };
        });
      this.isDeleteAll = true;
      this.formData.values = [];
    },
    getData() {
      let validate = true;
      if (
        (this.formData.key === null ||
          this.formData.key === "" ||
          this.formData.key === undefined) &&
        !this.isDeleteAll
      ) {
        uni.showToast({
          title: "请填写商品规格",
          icon: "none"
        });
        validate = false;
        return false;
      }

      for (let index = 0; index < this.formData.values.length; index++) {
        const sku = this.formData.values[index];
        if (this.$isNull(sku.spec)) {
          uni.showToast({
            title: "请填写规格选项",
            icon: "none"
          });
          validate = false;
          return false;
        }
        if (this.$isNull(sku.price)) {
          uni.showToast({
            title: "请填写规格价格",
            icon: "none"
          });
          validate = false;
          return false;
        }
        if (sku.price > maxPrice) {
          uni.showToast({
            title: priceMessage,
            icon: "none"
          });
          validate = false;
          return false;
        }
        if (sku.stock > maxStock) {
          uni.showToast({
            title: stockMessage,
            icon: "none"
          });
          validate = false;
          return false;
        }
      }
      return validate
        ? { formData: this.formData, deleteSkus: this.deleteSkus }
        : false;
    },
    addSpec() {
      this.formData.values.push({
        spec: "",
        price: this.price,
        stock: null
      });
    },

    handleBlurKey() {
      if (formData.key) this.modify = false;
    },
    handleBlurPrice(item) {
      if (item.price > maxPrice) {
        this.$toast(priceMessage);
        item.price = maxPrice;
      }
      if (item.price || item.price === 0) {
        item.price = parseFloat(item.price.toFixed(2));
      }
    },
    handleBlurStock(item) {
      if (item.stock > maxStock) {
        this.$toast(stockMessage);
        item.stock = maxStock;
      }
      if (item.stock || item.stock === 0) {
        item.stock = parseFloat(item.stock.toFixed(0));
      }
      if (this.$isNull(item.stock)) {
        item.stock = null;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.sku-form {
  .sku-form__top {
    display: flex;
    justify-content: space-between;
    font-size: $uni-font-size-lg;
    // .input-wrap {
    // }
    .btn-wrap {
      font-size: $uni-font-size-lg;
      color: $uni-color-primary;
    }
    margin-bottom: 20rpx;
    padding: 10rpx 0;
    border-bottom: 1px solid $uni-border-color;
  }
  .sku-form__table {
    // overflow: hidden;
    // .sku-form__table_head {
    // }
    // .sku-form__table_body {
    //   // overflow: hidden;
    // }
    .sku-form__table_tr {
      display: flex;
      margin-bottom: 10rpx;
    }
    .delete-btn-wrap {
      display: flex;
      justify-content: center;
    }
    .sku-form__table_th {
      font-size: $uni-font-size-lg;
      .tip {
        font-size: $uni-font-size-sm;
      }
    }
    .td-width-1 {
      width: 35%;
    }
    .td-width-2 {
      width: 30%;
    }
    .td-width-3 {
      width: 35%;
    }
    .sku-form__table_td {
      box-sizing: border-box;
      padding-right: 20rpx;
      overflow: hidden;
    }
    .sku-input-wrap {
      border: 1px solid $uni-border-color;
      padding: 10rpx;
    }
    .sku-stock-input-wrap {
      float: left;
      width: 65%;
    }
    .sku-delete-wrap {
      float: right;
      // margin-left: 5rpx;
      width: 15%;
    }
    // .sku-input {
    //   // border: 1px solid $uni-border-color;
    // }
  }
}
</style>
